<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-24 22:18:34
 * @LastEditTime: 2019-11-08 15:29:46
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="index">
    <!-- <Banner></Banner> -->
    <div class="news" v-for="(value,key) in newsList" :key="key">
      <h3>{{value.title}}</h3>
      <ul>
        <li v-for="(news,index) in value.list" :key="index">
          <a :href="news.link" target="_blank">{{news.title}}</a>
          <!-- <router-link :to="{path: '/newsDetail', query: {link: news.link}}">{{news.title}}</router-link> -->
        </li>
      </ul>
    </div>

    <div class="pic-preview-box">
      <ImageCard></ImageCard>
    </div>
    <div class="flex flex-center" v-if="newsList.length > 0">
      <router-link to="/login">
        <el-button type="primary">查看更多></el-button>
      </router-link>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import ImageCard from '@c/ImageCard';
// import Banner from '@c/Banner';
import { publicNewsHotList, publicNegativeParaList } from "@f/public";
export default {
  name: "index",
  data: () => {
    return {
      content: "",
      newsList: []
    };
  },
  mounted() {
    // this.getNewsList();
    // this.getNegativeParaList();
  },
  components: {
    ImageCard,
    // Banner
  },
  methods: {
    getNewsList: function() {
      var _this = this;
      publicNewsHotList().then(res => {
        if (res.data.success) {
          console.log(res.data);
          _this.newsList = res.data.data;
        } else {
          this.$message.error("获取新闻列表失败！");
        }
      });
    },
    getNegativeParaList: function() {
      var _this = this;
      publicNegativeParaList().then(res => {
        if (res.data.success) {
          console.log(res.data);
          _this.newsList = res.data.data;
        } else {
          this.$message.error("获取新闻列表失败！");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.pic-preview-box {
  overflow: auto;
}
.el-image__inner {
  &:hover {
    border: 1px solid #fff;
  }
}
</style>